{% extends "layout.html" %}

{% block left %}
<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
        <li><a href="/line">折线图</a></li>
        <li><a href="/bar">柱形图</a></li>
        <li class="active"><a href="/wordcloud">词云</a>
          <li><a href="/team">团队</a></li>
  </ul>
</div>
{% endblock %}        
        
{% block right %}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  <h1 class="page-header">{{title}}</h1>
  <div class="row placeholders">
    <div class="col-xs-12 col-sm-8 col-lg-10 placeholder" style="height:500px;" id="main">
    </div>
  </div>
</div>
{% endblock %}

{% block echarts_js %}
<script src="/static/js/echarts.min.js" charset="utf-8"></script>
<script src="/static/js/echarts-wordcloud.min.js" charset="utf-8"></script>
<script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
          title:{
          },
          tooltip: {},
          series: [{
              type: 'wordCloud',
              gridSize: 20,
              sizeRange: [30, 80],
              rotationRange: [0, 0],
              shape: 'pentagon',
              textStyle: {
                  normal: {
                      color: function() {
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  emphasis: {
                      shadowBlur: 10,
                      shadowColor: '#333'
                  }
              },
              data: {{data|safe}}
          }]
      };
      myChart.setOption(option);
</script>        
{% endblock %}